/* stylelint-disable keyframes-name-pattern */
@keyframes __bespoke_marp_transition_reduced_outgoing__ {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes __bespoke_marp_transition_reduced_incoming__ {
  0% {
    opacity: 0;
    mix-blend-mode: plus-lighter;
  }

  100% {
    opacity: 1;
    mix-blend-mode: plus-lighter;
  }
}
/* stylelint-enable keyframes-name-pattern */

@mixin transition {
  @at-root {
    ::view-transition-group(*) {
      animation-duration: var(
        --marp-bespoke-transition-animation-duration,
        0.5s
      );
      animation-timing-function: ease;
    }

    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation-name: var(
        --marp-bespoke-transition-animation-name,
        var(
          --marp-bespoke-transition-animation-name-fallback,
          __bespoke_marp_transition_no_animation__
        )
      );
      animation-duration: var(
        --marp-bespoke-transition-animation-duration,
        0.5s
      );
      animation-delay: 0s;
      animation-fill-mode: both;
      animation-direction: var(
        --marp-bespoke-transition-animation-direction,
        normal
      );
      mix-blend-mode: normal;
    }

    ::view-transition-old(*) {
      --marp-bespoke-transition-animation-name-fallback: __bespoke_marp_transition_reduced_outgoing__;

      animation-timing-function: ease;
    }

    ::view-transition-new(*) {
      --marp-bespoke-transition-animation-name-fallback: __bespoke_marp_transition_reduced_incoming__;

      animation-timing-function: ease;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation-timing-function: linear;
    }

    ::view-transition-old(__bespoke_marp_transition_osc__),
    ::view-transition-new(__bespoke_marp_transition_osc__) {
      animation-name: __bespoke_marp_transition_osc__ !important; /* no animation */
      animation-duration: 0s !important;
    }

    ::view-transition-new(__bespoke_marp_transition_osc__) {
      opacity: 0 !important;
    }

    .bespoke-marp-transition-warming-up::view-transition-group(*),
    .bespoke-marp-transition-warming-up::view-transition-new(*),
    .bespoke-marp-transition-warming-up::view-transition-old(*) {
      animation-play-state: paused !important;
    }
  }
}
